<template>
  <view class="swiper-container">
    <swiper
      class="home-swiper"
      indicator-dots="{{obj.adData.length>1?true:false}}"
      indicator-active-color="#FFFFFF"
      activeColor="#F7F7F7"
      autoplay="true"
      interval="3000"
    >
      <block v-for="(item, index) in obj.adData" :key="index">
        <swiper-item>
          <view @click="tapAd(index)" class="swiper-item">
            <image class="img" :src="item"></image>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>
</template>

<script setup lang="ts">

const emit = defineEmits(['tapAd', 'ok', 'rightClons'])

const PropsData = defineProps({
  position: {
    type: Number,
    default: 0
  }
})

const obj = reactive<{ adData: Array<string> }>({ adData: [] })

const tapAd = (index: number) => emit('tapAd', { index })

const getAdList = async (position: number) => {
  //const ad = await getYkxAdList({ position })
  //if (ad && Array.isArray(ad)) {
  //  obj.adData = ad.map((item) => item.pic)
  //}
}

watch(
  (): number => PropsData.position,
  (newvalue, lodvalue) => {
    console.log(newvalue, lodvalue)
    //getAdList(newvalue)
  },
  {
    deep: true,
    immediate: true
  }
)

</script>

<style scoped>
.home-swiper {
  height: 175rpx;
}
.swiper-item .img {
  width: 100%;
  height: 175rpx;
}
</style>